<template>
<div>
  <van-nav-bar
      title="修改资料"
      left-text="返回"
      left-arrow
      @click-left="back"
  />
  <div>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
      <van-field name="radio" label="性别">
        <template #input>
          <van-radio-group v-model="detail.sex" direction="horizontal">
            <van-radio name="男">男</van-radio>
            <van-radio name="女">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      </van-cell-group>
      <van-cell-group inset>
        <van-field
            v-model="detail.city"
            is-link
            readonly
            label="城市"
            placeholder="请选择所在地区"
            @click="show = true"
        />
        <van-popup v-model:show="show" round position="bottom">
          <van-area title="请选择城市" :area-list="areaList" @confirm="selectCity" @cancel="show=false"/>
        </van-popup>
      </van-cell-group>
      <van-cell-group inset>
        <van-field
            v-model="detail.birthday"
            label="生日"
            placeholder="请选择你的生日"
            @click="show1 = true"
        />
        <van-popup v-model:show="show1" round position="bottom">
          <van-date-picker
              title="选择生日"
              :min-date="minDate"
              @confirm="selectBirthday"
              @cancel="show1=false"
          />
        </van-popup>
      </van-cell-group>
      <van-cell-group inset>
      <van-field
          v-model="detail.status"
          is-link
          readonly
          label="状态"
          placeholder="请选择你的状态"
          @click="show2 = true"
      />
      <van-popup v-model:show="show2" round position="bottom">
        <van-picker
            :columns="columns"
            @cancel="show2 = false"
            @confirm="selectStatus"
        />
      </van-popup>
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          修改资料
        </van-button>
      </div>
    </van-form>

  </div>
</div>
</template>

<script>
import { areaList } from '@vant/area-data';

export default {
  name: "UserDetail",
  setup() {
    return { areaList };
  },
  data(){
    return{
      show2:false,
      show1:false,
      show:false,
      detail:{
        city:"",
      },
      columns:[
        { text: '在职', value: '在职' },
        { text: '学生', value: '学生' },
        { text: '待业', value: '待业' }
      ],
      minDate: new Date(1980, 0, 1)
    }
  },
  methods:{
    back(){
      history.back();
    },
    selectCity(v){
      this.show=false;
      for(const i in v.selectedOptions){
        this.detail.city+=v.selectedOptions[i].text;
      }
    },
    selectBirthday(v){
      this.detail.birthday=v.selectedValues.join('-');
      this.show1=false;
    },
    selectStatus(v){
      this.detail.status=v.selectedOptions[0].text;
      this.show2=false;
    }
  }
}
</script>

<style scoped>

</style>